<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-if -->
        <!-- <div>
            <p>你的成绩是:{{grade}}</p>
            <div>
                是否及格:
                <span v-if="grade>=60">及格</span>
                <span v-else>不及格</span>
            </div>
            <div>
                评分: 
                <span v-if="grade>=90">A</span>
                <span v-else-if="grade>=80">B</span>
                <span v-else-if="grade>=70">C</span>
                <span v-else-if="grade>=60">D</span>
                <span v-else>E</span>
            </div>
        </div> -->
        <!-- v-show -->
        <!-- <div>
            <p>你的成绩是:{{grade}}</p>
            <div>
                是否及格:
                <span v-show="grade>=60">及格</span>
                <span v-show="grade<60">不及格</span>
            </div>
            <div>
                评分: 
                <span v-show="grade>=90">A</span>
                <span v-show="grade>=80&&grade<90">B</span>
                <span v-show="grade>=70&&grade<80">C</span>
                <span v-show="grade>=60&&grade<70">D</span>
                <span v-show="grade<60">E</span>
            </div>
        </div> -->

        <!-- cookie标识用户身份 -->
        <div class="demo">
            <!-- 用户没有登录 -->
            <!-- <a href="">你好,请登录</a>
            <a href="">免费注册</a> -->

            <!-- 用户已登录 -->
            <!-- <a href="javascript:;">欢迎您,xxx</a>
            <a href="javascript:;">退出</a> -->

            <!-- 此写法不行 -> 语法问题 -> 如果表达式的结果为false  就会有问题-->
            <!-- <a href="javascript:;" v-if="lgc">欢迎您,{{lgc}}</a>
            <a href="javascript:;" v-if="lgc">退出</a>
            <a href="" v-else>你好,请登录</a>
            <a href="" v-else>免费注册</a> -->

            <!-- 
            if(true){}

            if(true){}
            else{}

            else{}  没有意义-->


            <!-- 此写法没有问题 -->
            <!-- <div v-if="lgc">
                <a href="javascript:;" >欢迎您,{{lgc}}</a>
                <a href="javascript:;" >退出</a>
            </div>
            <div v-else>
                <a href="" >你好,请登录</a>
                <a href="">免费注册</a>
            </div> -->

            <!-- 注意: 如果想条件性的同时渲染多个同级标签,但是又不想包裹无意义的父标签,可以使用template包裹,虽然template也是作为父标签存在,但是在Vue解析模板为真实DOM时,template会被舍去 -->
            <template v-if="lgc">
                <a href="javascript:;" >欢迎您,{{lgc}}</a>
                <a href="javascript:;" >退出</a>
            </template>
            <template v-else>
                <a href="" >你好,请登录</a>
                <a href="">免费注册</a>
            </template>
          
        </div>
        
    </div>
</body>
<script>
    
    // 指令   => 是标签的特殊属性 (写在标签内)
    // 指令 (Directives) 是带有 v-前缀的特殊 attribute, 指令 attribute 的值预期是单个 JavaScript 表达式  (v-for 是例外情况，稍后我们再讨论)
    // 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

    // 注意:
    // 1. 指令是带有v-前缀的特殊属性(attribute),不同的指令有不同的作用(vue中定义好的)
    // 2. 指令 attribute 的值预期是单个 JavaScript 表达式  => 使用的是表达式的最终结果
    // 3. 指令的最终目的是操作dom, 且当表达式的值改变时,视图也会更新

    // Vue在解析模板语法过程中 发现标签出现以v-开头的特殊属性,则会取出属性值,作为javascript表达式解析 => 得到表达式的结果  => 在按功能使用表达式的结果

    // v-html   设置标签内的html结构 (操作元素,改变元素的html结构 innerHTML)
    // v-text   设置标签内的文本 (操作元素,改变元素的文本 innerText)
    // v-pre    禁用文本插值 -> 此时{{xxxx}} 都会作为普通文本解析

    // v-clock   这个指令保持在元素上直到关联实例结束编译 (等Vue实例完成初始化渲染之后 会移除此属性 -> 这个指令可以配合属性选择器 => 可以隐藏未编译的双大括号语法(Mustache 标签)直到实例准备完毕。 )


    // v-if  v-else-if   v-else  根据指令的值,有条件的渲染元素  如果指令的值(表达式的结果)为true=>渲染该元素  否则就不渲染
    // v-show    根据指令的值,有条件的展示元素(切换元素的display)  如果指令的值(表达式的结果)为true=> display:block  否则就display:none;

    // 对比 v-if 和 v-show
    // 1. v-if  根据指令的值,有条件的渲染元素, 满足条件就渲染,否则就不渲染
    //    v-show 不管条件成立与否 元素最终都渲染了, 只不过满足条件的显示,不满足条件的隐藏(display:none)
    
    // 2. v-show 的初始渲染成本比较高(不管条件成立与否 元素最终都渲染了),切换成本低
    //    v-if   虽然初始渲染成本比较低(满足条件就渲染,否则就不渲染),切换成本比较高(每次生成元素和删除元素都要耗费浏览器的性能)



    // v-for


    var vm = new Vue({
        el:"#app",
        data:{
            grade: Math.round(Math.random()*100),
            lgc:"a123123"
        }
    })





</script>
</html>